<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'收款对账',liner:false}"></header-top>
		<view class="mainpadding" v-if="!ishkjz">
			<view class="yuangbox flexleft">
				<view class="ygtext">员工：</view>
				<view :class="staff_name?'lansebtn allbtn':'allbtn huisebtn'"
					@click="selectRole('/pages/workbench/jiben/yuangongda?type=2')">
					{{staff_name || '选择员工'}}
				</view>
			</view>
		</view>
		<view class="flexcenter" v-if="!list.data.length">
			<view class="placeholderimage"></view>
		</view>
		<view class="paddingbom" v-if="list.data.length">
			<view class="ffffff zdymainpadding" >
				<view class="" v-for="item in list.data" :key="item.id" @click="jumpdetail(item)">
					<view class="flexbetween bottom-line">
						<view class="flexleft">
							<view style="margin-right: 30rpx ;" @click.stop="selectItem(item)" v-if="!ishkjz">
								<!-- 选中 -->
								<view class="selecticon" v-if="item.is_check">
									<image src="@/static/image/system/dui.png" mode=""></image>
								</view>
								<!-- 未选中 -->
								<view class="noselecticon" v-if="!item.is_check"></view>
							</view>
							<!-- 销售单 -->
							<view v-if="type==1">
								<view class="flexbetween">
									<view class="xiaoshou">销售单</view>
									<view class="qianshu">{{item.pay_price}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.order_no}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.custom.name}}</view>
								</view>
								<view style="margin-top: 16rpx;" class="flexleft" @click.stop="phone(item.custom.mobile)">
									<view class="alltext">{{item.custom.username}}</view>
									<view class="dizhiimg"></view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.createtime_text}}</view>
								</view>
							</view>
							<!-- 预收款 -->
							<view v-if="type==2">
								<view class="flexbetween">
									<view class="xiaoshou">预收款</view>
									<view class="qianshu">{{item.pay_price}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.order_no}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.custom.name}}</view>
								</view>
								<view style="margin-top: 16rpx;" class="flexleft" @click.stop="phone(item.custom.mobile)">
									<view class="alltext">{{item.custom.username}}</view>
									<view class="dizhiimg"></view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.createtime_text}}</view>
								</view>
							</view>
							<!-- 客户结算 -->
							<view v-if="type==3">
								<view class="flexbetween">
									<view class="xiaoshou">客户结算</view>
									<view class="qianshu">{{item.pay_price}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.order_no}}</view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.custom.name}}</view>
								</view>
								<view style="margin-top: 16rpx;" class="flexleft" @click.stop="phone(item.custom.mobile)">
									<view class="alltext">{{item.custom.username}}</view>
									<view class="dizhiimg"></view>
								</view>
								<view style="margin-top: 16rpx;">
									<view class="alltext">{{item.createtime_text}}</view>
								</view>
							</view>
						</view>
						<view class="images">
							<image class="righticon2" src="../../../static/image/system/righticon2.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="flexbetween ffffff bottombox" style="z-index: 0;" v-if="list.data.length && !ishkjz">
			<view class="leftradio margin_right flexleft" @click="checkall">
				<!-- 选中 -->
				<view class="selecticon" v-if="check_all">
					<image src="@/static/image/system/dui.png" mode=""></image>
				</view>
				<!-- 未选中 -->
				<view class="noselecticon" v-if="!check_all"></view>
				<view class="quanxuan">全选</view>
			</view>
			<view class="rt flexleft">
				<view class="daijiaoje">合计：{{pay_money}}</view>
				<view class="shangjiaobtn" @click="up1(126)">上交</view>
			</view>
		</view>
		<u-modal :show="examinenoteShow" title="输入备注" @confirm="up(126)" showCancelButton @cancel="examinenoteShow=false">
			<view class="slot-content">
				<view class="mainpadding2">
					<textarea class="textarea mainpadding radius margin_top" placeholder="请输入审核备注信息"
						v-model="notes"></textarea>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				type: "",
				selectids: [],
				list: [],
				check_all: false,
				staff_name:"",
				staff_id:"",
				pay_money:"",
				pageShow:false,
				ishkjz:false,
				examinenoteShow:false,
				notes:"",
			}
		},
		onLoad(options) {
			uni.hideTabBar(); //隐藏tab
			let data = JSON.parse(decodeURIComponent(options.msg));
			this.type = data.type
			this.staff_id = data.listid
			this.staff_name = data.name
			if( data.listid && data.name==""){//如果只传了员工id没用传名称则是货款交账过来不需要展示上交和选择员工功能
				this.ishkjz = true
			}

		},
		onShow() {
			uni.$off('ygSelectFn');
			uni.$on('ygSelectFn', (data) => {
				this.staff_id = data.id
				this.staff_name = data.name
			})
			this.init()
		},
		watch: {
			list: {
				deep: true,
				handler(newval) {
					let number = 0
					let pay_money = 0
					newval.data.forEach(item => {
						if (item.is_check) {
							number = number + 1
							pay_money = Number(pay_money) + Number(item.pay_price)
						}
					})
					if (number == this.list.data.length) {
						this.check_all = true
					} else {
						this.check_all = false
					}
					this.pay_money = pay_money
				}
			}
		},
		methods: {
			selectRole(url) {
				uni.navigateTo({
					url
				})
			},
			init() {
				let data = {
					start_time: "",
					end_time: "",
					staff_id: this.staff_id
				}
				let url = "/dhtapi/user/saleOrderPay"
				if (this.type == 2) {
					url = "/dhtapi/user/yskOrderPay"
				} else if (this.type == 3) {
					url = "/dhtapi/user/jsOrderPay"
				}
				httpRequest.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						res.data.data.forEach(item => {
							this.$set(item, "is_check", false)
							this.selectids.forEach(ite => {
								if (ite == item.id) {
									item.is_check = true
								}
							})
						})
						this.list = res.data
						this.pageShow = true
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			up1(qxpdid){
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				if (this.staff_id == "") {
					httpRequest.toast("请选择员工")
					return
				}
				if (this.selectids.length == 0) {
					httpRequest.toast("请先选择单据，再进行提交")
					return
				}
				this.examinenoteShow=true
			},
			// 上交
			up(qxpdid) {
				this.examinenoteShow=false
				
				// 1=销售单,2=销货退货单,3=收款单,4=预收款单,5=订货单,6=费用支出
				let data = {
					staff_id: this.staff_id,
					ly:2,
					sale_order_pay_ids:this.selectids.join(),
					notes:this.notes
				}
				let url = "/dhtapi/user/submitSkdzData"
				if (this.type == 2) {
					data = {
						staff_id: this.staff_id,
						ly:3,
						custom_ysk_order_ids:this.selectids.join()
					}
				} else if (this.type == 3) {
					data = {
						staff_id: this.staff_id,
						ly:4,
						custom_js_ids:this.selectids.join()
					}
				}
				httpRequest.request(url, 'POST', data).then(res => {
					if (res.code == 1) {
						httpRequest.toast("上交成功")
						this.selectids = []
						this.init()
						this.notes = ""
					} else {
						httpRequest.toast(res.msg)
					}
				}).catch(err => {
					httpRequest.toast(err.msg)
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			selectItem(item) {
				if (item.is_check) {
					item.is_check = false
					this.selectids.forEach((ite, ind) => {
						if (item.id == ite) {
							this.selectids.splice(ind, 1)
						}
					})
				} else {
					item.is_check = true
					this.selectids.push(item.id)
				}
				console.log(this.selectids, "选中的数组")
			},
			checkall() {
				if (this.check_all) {
					this.check_all = false
					this.list.data.forEach(ite => {
						ite.is_check = false
					})
					this.selectids = []
				} else {
					this.check_all = true
					this.list.data.forEach(ite => {
						ite.is_check = true
						this.selectids.push(ite.id)
					})
				}
			},
			// 跳转详情
			jumpdetail(item) {
				let type = this.type
				// 1=销售单,2=销货退货单,3=收款单,4=预收款单,5=订货单,6=费用支出
				if (type == 1) { //销售单
					uni.navigateTo({
						url: '/pages/workbench/xiaoshou/xiaoshoudxq?id=' + item.sale_order_id
					})
				} else if (type == 2) {//预收款
					uni.navigateTo({
						url: '/pages/workbench/caiwu/kehuyskxq?id=' + item.id
					})
				} else if (type == 3) {
					// 客户结算详情
					uni.navigateTo({
						url:"/pages/workbench/caiwu/kehujsdetail?id="+item.id
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.quanxuan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
		margin-left: 14rpx;
	}

	.bianmatitle {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.bottombox {
		padding: 38rpx 30rpx 80rpx;
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		box-sizing: border-box;
	}

	.daijiaoje {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.shangjiaobtn {
		width: 198rpx;
		height: 62rpx;
		margin-left: 26rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #00B855;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}

	.duiztitle {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.bgcs {
		padding-bottom: 200rpx;
	}

	.dingdqian {
		margin-left: 156rpx;
	}

	.box3 {
		margin-bottom: 16rpx;
	}

	.box2 {
		margin: 20rpx 0 16rpx;
	}

	.righticon2 {
		width: 13rpx;
		height: 20rpx;

		image {
			width: 100%;
			height: 100%;
		}
	}
.textarea {
		box-sizing: border-box;
		background-color: #F8F8F8;
		height: 180rpx;
	}
	.alltext {

		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.qianshu {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
	}

	.daijiao {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
		margin-left: 40rpx;
	}

	.xiaoshou {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.shoukuaant {
		padding: 30rpx 30rpx 20rpx;
		border-bottom: 1rpx solid rgba(0, 0, 0, .02);
	}

	.img {
		width: 40rpx;
		height: 40rpx;
	}

	/* // tab切换 */
	.selectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #0BBDCB;
		line-height: 33rpx;
		background-color: #e1f4f5;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.noselectbox {
		padding: 6rpx 30rpx;
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
		line-height: 33rpx;
		background-color: #eff0f0;
		border-radius: 30rpx;
		margin-right: 30rpx;
	}

	.selecttimetext {
		font-size: 24rpx;
		font-family: San Francisco Display-Medium, San Francisco Display;
		font-weight: 500;
		color: #666666;
		line-height: 24rpx;
	}

	.yuangbox {
		display: flex;
		align-items: center;
	}

	.ygbtn {
		margin: 16rpx 0 22rpx;
		background: rgba(153, 153, 153, .1);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		padding: 14rpx 120rpx;
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.ygtext {
		color: #666;
		font-weight: bold;
		font-size: 32rpx
	}

	.allbtn {
		width: 350rpx;
		height: 52rpx;
		border-radius: 50rpx;
		font-size: 24rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
	}

	.lansebtn {
		color: #0BBDCB;
		background: rgba(11, 189, 203, .1);
	}

	.huisebtn {
		color: #999999;
		background: rgba(153, 153, 153, .1);
	}

	.boxsizing {
		box-sizing: border-box;
	}

	.bottom-line {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(153, 153, 153, .1);
	}

	.paddingbom {
		padding-bottom: 150rpx;
	}

	.zdymainpadding {
		padding: 0 30rpx;
	}
</style>